<template>
  <p-form-model
    ref="ruleForm"
    layout="inline"
    :model="resultForm"
    :rules="isOver ? [] : rules"
  >
    <p-form-model-item
      label="处理结果/意见"
      prop="result"
      class="form-item"
      :style="
        isCurrent
          ? 'width: 100%; margin-left: 30px; height: 84px'
          : 'width: 100%; margin-left: 30px'
      "
    >
      <p-textarea
        v-if="!isOver"
        v-model="resultForm.result"
        placeholder="请输入"
        style="height: 80px; width: 100%; resize: none"
      />
      <span v-if="isOver">{{ resultForm.result }}</span>
    </p-form-model-item>
    <p-form-model-item
      v-if="isOver"
      label="处理日期"
      prop="currentMatterTime"
      class="form-item"
      style="width: 100%; margin-left: 30px"
    >
      <span>{{ resultForm.currentMatterTime }}</span>
    </p-form-model-item>
    <div>
      <div>
        <span style="margin-left: 90px; margin-right: 10px; margin-top: 10px">
          附件:
        </span>
        <p-button v-if="!isOver" :disabled="!isCurrent" @click="upLoad">
          <p-icon type="upload" />
        </p-button>
        <p-tooltip
          v-if="!isOver"
          placement="top"
          title="附件上传的格式：xls,
        xlsx,
        doc,
        docx,
        ppt,
        pptx,
        gif,  
        png,
        jpg,
        jpeg,
        pdf,
        rar,
        zip,"
        >
          <p-icon
            type="question-circle"
            style="color: blue; margin-left: 20px"
          />
        </p-tooltip>
      </div>
      <div :style="isOver ? 'margin-top: -20px' : 'margin-top: 0px'">
        <span v-for="(item, i) in list" :key="item.id" class="fileSpan">
          <a :href="item.atthAccessPath">{{ item.atthName }}</a>
          <p-icon
            v-if="isCurrent"
            type="delete"
            style="color: rgb(24, 144, 255); cursor: pointer"
            @click="deleteFile(item, i)"
          />
        </span>
      </div>
      <div v-show="isload" style="margin-left: 110px; margin-top: 10px">
        <p-spin tip="附件上传中" size="small" />
      </div>
    </div>
    <DialogUpAttachment
      ref="upload"
      :list.sync="list"
      :file-list.sync="fileList"
      type="matter"
      :isload.sync="isload"
    />
  </p-form-model>
</template>

<script>
import { postBusinessTableList } from '@/api/visit.js';
import DialogUpAttachment from '@/components/dialog/DialogUpAttachment.vue';
import monent from 'moment';

export default {
  components: {
    DialogUpAttachment,
  },
  props: {
    resultForm: {
      type: Object,
      default: () => ({}),
    },
    isCurrent: {
      type: Boolean,
      default: false,
    },
    matterId: {
      type: [String, Number],
      default: '',
    },
    deleteFileId: {
      type: Array,
      default: () => [],
    },
    isOver: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      isload: false,
      fileList: [],
      list: [],
      customerName: '',
      opportunityDataSource: [],
      visibleLegalNo: false,
      parentId: '',
      hasAll: false,
      visibleCustomer: false,
      visibleOpportunity: false,
      visibleModelName: false,
      isDetail: false,
      updateUserGroup: '',
      rules: {
        result: [
          { required: true, message: '请输入处理结果/意见', trigger: 'blur' },
          { max: 255, message: '输入的内容过长', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    typeOptions() {
      return this.$store.state.dictionary.dict['agreement_type'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['agreement_status'] || {};
    },
  },
  watch: {
    resultForm: {
      handler(val) {
        console.log('val: ', val);
        const attachmentList = val.attachmentList;
        console.log('attachmentList: ', attachmentList);
        if (attachmentList !== undefined) {
          if (attachmentList.length) {
            attachmentList.forEach((item) => {
              this.list.push({
                atthName: item.atthName,
                atthAccessPath: item.atthAccessPath,
                id: item.id,
              });
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async searchOpportunity() {
      const data = {
        current: 1,
        pageSize: 10,
        customerShortName: this.form.customerName,
      };
      if (this.form.customerName !== '') {
        this.visibleOpportunity = true;
        const result = await postBusinessTableList(data);
        this.opportunityDataSource = result?.data?.data?.records;
      } else {
        this.$message.error('请选择客户名称后点击商机编号');
      }
    },
    async deleteFile(item, i) {
      this.deleteFileId.push(item.id);
      this.$emit('update:deleteFileId', this.deleteFileId);
      this.list.splice(i, 1);
    },
    upLoad() {
      this.$refs.upload?.uploader();
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },

    // handleDeadLineOk(value) {
    //   const formatTime = monent(value).format('YYYY-MM-DD 23:59:59');
    //   this.form.orderTime = formatTime;
    // },
    // handleDeadLineChange(value) {
    //   const formatTime = monent(value).format('YYYY-MM-DD 23:59:59');
    //   this.form.orderTime = formatTime;
    // },
    changeLegalNo(value) {
      this.form.legalNo = value?.label || '';
    },
    changeCustomer(val) {
      this.form.customerName = val?.label || '';
      this.form.customerCode = val?.key || '';
    },
    changeOpportunity(val) {
      this.form.opportunityNo = val?.key || '';
      this.form.opportunityName = val?.label || '';
    },
    changeModelName(val) {
      this.form.modelName = val?.label || '';
    },
    changeHandle(val) {
      this.form.salesGroup = val;
    },

    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.connect {
  width: 100%;
  display: flex;
  justify-content: center;
}
.connect2 {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.connect_form {
  width: 49%;
  display: inline-block;
}
// .from-input {
//   width: 320%;
// }
.row {
  margin-top: 20px;
}
/deep/ .poros-form-item {
  margin-bottom: 20px;
}
/deep/ .poros-form-item-label {
  width: 100px !important;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
.load {
  margin-top: 50px !important;
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
.disinput {
  background-color: #fff;
  cursor: default;
  color: #000;
  width: 85%;
  margin-right: 2%;
}
.isremark {
  width: 100%;
  margin-left: 12px;
  height: 60px;
}
.remark {
  width: 100%;
  margin-left: 12px;
}
// /deep/ .poros-upload-list {
//   display: inline-block;
// }
/deep/ .poros-upload-list-item {
  margin-left: 100px;
}
/deep/ .anticon {
  margin-left: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
  margin-top: 40px;
}
.fileSpan {
  margin-left: 127px;
  display: block;
  padding: 3px 0;
}
</style>